<template>
  <div id="app">
  {{count}}--{{name}}-{{gender}}
  {{countPlus}}
   <div>
     <button @click="incrementBy(3)">
        @click="handelClick"
     点我
   </button>
   </div>
  </div>
</template>

<script>
// import store from './vuex/store.js'
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'
export default {
  data(){
    return{
      localCount:9,
      obj:{}
    }
  },
  name: 'App',
  computed:
    // count(){
    //   return this.$store.state.count
    // }
    // 传过来的是对象
    // mapState({
    //           //传过来的参数   函数的返回值       
    //    count: state => state.count,
    //    name: state => state.name,
    //    gender: state => state.gender,
    //   //  如果该参数是有语句得到的 就不能写箭头函数  只要state.count变化 countPlus就会重新被赋值
    //     countPlus (state) {
    //     return state.count + this.localCount
    //   }
    // }),
     
     // 传字符串参数 'count' 等同于 `state => state.count`
     mapState([
       'count','name','gender'
     ]),
    
  methods:{
    // handelClick(){
    //   console.log(this.count)
    // //    //  引入父元素即store.js中定义的方法  可以传值 大多数情况下应该为对象
    //     //  this.$store.commit('SOME_MUTATION',3)
    // //    this.$store.commit('increment',{amount:5})
    //      //  console.log( this.$store.state.count++)
    //      // 以新对象替换老对象
    //       this.obj ={...this.$store.state,'hobbies':'haha'}
    //       console.log(this.obj)
    // }
    ...mapMutations([
      'incrementBy'
    ])
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
